<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/header.css">
  <link rel="stylesheet" href="../css/mortgage.css">
  <title>房贷计算器</title>
</head>

<body>
  <!-- 头部 -->
  <div class="head">
    <div class="title left">
      <img src="../imgs/5.png" class="left" alt="">
      <div class="titleGps left">
          <p class="left">新乡</p><span class="left"></span>
      </div>
    </div>
    <div class="headNav left">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="" class="btnColor">新房</a></li>
        <li><a href="">二手房</a></li>
        <li><a href="">楼市</a></li>
        <li><a href="">置业管家</a></li>
        <li><a href="">品牌地产</a></li>
      </ul>
    </div>
    <div class="search left">
      <div>
        <p>新房<span></span></p>
      </div>
      <div>
        <input type="text" name="" id="" placeholder="请输入楼盘名称">
      </div>
      <a class="login" href="">登录</a>
    </div>
  </div>
  <div class="tian"><img src="../imgs/title-phone.png" alt=""></div>
  <div class="morcont">
    <div class="mrct1">
      <p>最新贷款利率：商业贷款<b style="color:#f15d00;">4.9</b>%公积金<b style="color:#f15d00;">3.25</b></p>
      <div class="mrct2">
        <div class="mrct3 fudong">
          <span>房贷计算器</span>
          <span>购买能力计算器</span>
          <span>公积金计算器</span>
          <span>提前还款计算器</span>
          <span>税费计算器</span>
        </div>
        <div class="mrct4 fudong">
          <!-- 选项卡 -->
          <div class="mrct5">
            <div class="mcka1">
              <span>
                <img src="../imgs/mor-01.png" alt="">
                <span>商业贷款</span>
              </span>
            </div>
            <div class="mcka1">
              <span>
                <img src="../imgs/mor-01.png" alt="">
                <span>商业贷款</span>
              </span>
            </div>
            <div class="mcka1">
              <span>
                <img src="../imgs/mor-01.png" alt="">
                <span>商业贷款</span>
              </span>
            </div>
          </div>
          <!-- 右部分 -->
          <div class="mrct6 fudong">
            <!-- 计算方式 -->
            <div class="mrct7">
              <ul>
                <li class="canli1 fudong">
                  <span style="float: left;margin-right: 33px;">还款方式</span>
                  <form style="float: left;" action="" method="get"> 
                    <label><input name="Fruit" type="checkbox" value="" />苹果苹果 </label> 
                    <label><input name="Fruit" type="checkbox" value="" />桃子苹果 </label> 
                  </form> 
                </li>
                <li>
                  <div class="fudong">
                    <span class="daik0">贷款总额</span>
                    <div class="daik1">
                      <span class="daisp1">100</span>
                      <input type="text">
                    </div>
                    <span class="daisp2">万元</span>
                  </div>
                </li>
                <li>
                  <div class="fudong daik2">
                    <span class="daik0">按揭年数</span>
                    <div class="daik1">
                      <select name="" id="">
                        <option value="">20年（240期）</option>
                      </select>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="fudong daik2">
                    <span class="daik0">按揭年数</span>
                    <div class="daik1">
                      <select name="" id="">
                        <option value="">20年（240期）</option>
                      </select>
                    </div>
                    <span class="daisp2">%</span>
                  </div>
                </li>
                <li>
                  <span class="moeji">计算</span>
                  <span class="moezhi">重置</span>
                </li>
              </ul>
            </div>
            <!-- 计算结果 -->
            <div class="mrct8">
              <p style="font-size:13px;margin-bottom:10px;">计算结果</p>
              <table class="mrct9" cellspacing="0" cellpadding="10">
                <tr>
                  <td>等额本息</td>
                  <td>煤气等额还款</td>
                </tr>
                <tr>
                  <td>货款总额</td>
                  <td>元</td>
                </tr>
                <tr>
                  <td>货款期限</td>
                  <td>期</td>
                </tr>
                <tr>
                  <td>每期还款</td>
                  <td>元</td>
                </tr>
                <tr>
                  <td>支付利息</td>
                  <td>元</td>
                </tr>
                <tr>
                  <td>还款总额</td>
                  <td>元</td>
                </tr>
              </table>
              <table class="mrct9 mrct10" cellspacing="0" cellpadding="10">
                <tr>
                  <td>等额本息</td>
                  <td>煤气等额还款</td>
                </tr>
                <tr>
                  <td>货款总额</td>
                  <td>元</td>
                </tr>
                <tr>
                  <td>货款期限</td>
                  <td>期</td>
                </tr>
                <tr>
                  <td>每期还款</td>
                  <td>元</td>
                </tr>
                <tr>
                  <td>支付利息</td>
                  <td>元</td>
                </tr>
                <tr>
                  <td>还款总额</td>
                  <td>元</td>
                </tr>
              </table>
              <p style="font-size:13px;color:#96959b;">
                注:此结果仅供参考，实际应缴费以当地为准
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>